import React, { Component } from 'react'
import { Text, View, StyleSheet, ScrollView, SafeAreaView, TouchableOpacity, Image } from 'react-native'
import {
    width,
    titleHeight,
    deviceWidth,
    unitWidth,
    statusBarHeight,
    reallySize,
} from '../../utils/Global';
import ImagePicker from 'react-native-image-crop-picker';
export default class recentAlbum extends Component {
    constructor(props) {
        super(props)
        this.state = {
            title: "最近相册",
            leftItem: '取消',
            rightItem: '确定',

            flag: false,

            //接收选中图片
            selectItem: []
        }
    }

    componentDidMount = () => {

    }

    //将选中对象推进selectItem_person[]
    _selectItemPress(item) {
        if (item.select) {
            this.state.selectItem.splice(this.state.selectItem.findIndex(function (x) {
                return x === item.id;
            }), 1);
        } else {
            this.state.selectItem.push(item);
        }
        this.state.datas[item.id].select = !item.select;
        this.setState({ datas: this.state.datas })
    }

    render() {
        return (
            <SafeAreaView style={styles.container}>
                <View style={styles.statusBar}></View>

                {/* 头部组件 */}
                <View style={styles.header}>

                    {/* 返回键 */}
                    <TouchableOpacity onPress={() => { this.props.navigation.goBack() }}>
                        <Text style={{
                            color: " rgba(102, 102, 102, 1)"
                        }}>{this.state.leftItem}</Text>
                    </TouchableOpacity>

                    {/* 从手机相册提取照片 */}
                    <TouchableOpacity style={styles.recent_album} onPress={() => {
                        ImagePicker.openPicker({
                            width: 300,
                            height: 400,
                            cropping: true,
                            multiple: true,
                        })
                    }}>
                        <Text style={styles.recent_album_text}>{this.state.title}</Text>
                        <Image source={require("../../assets/images/socialcircle/more.png")}
                            style={styles.recent_album_image} />
                    </TouchableOpacity>

                    {/* 确定后传参到publish页 */}
                    <TouchableOpacity onPress={() => { this.props.navigation.navigate('publish', { selectItem: this.state.selectItem }) }}>
                        <Text style={{
                            color: " rgba(24, 144, 255, 1)"
                        }}>{this.state.rightItem}</Text>
                    </TouchableOpacity>
                </View>

                {/* 相册集合 */}
                <ScrollView>
                    <View style={styles.row}>
                        {this.state.datas.map((item, index) => (
                            <TouchableOpacity key={index} onPress={() => {
                                //点击一次push一个
                                this._selectItemPress(item)

                            }}>
                                <View style={styles.item} >
                                    <Image style={item.select ? styles.SystemPrompt_2 : styles.SystemPrompt} source={item.upload} />
                                </View>
                            </TouchableOpacity>
                        ))}
                    </View>
                </ScrollView>
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff"
    },
    header: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        height: 60,
        paddingLeft: 20,
        paddingRight: 20,
    },
    recent_album: {
        width: 100,
        height: 100,
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
    },
    recent_album_text: {
        fontSize: 20, lineHeight: 30, marginLeft: 5
    },
    recent_album_image: {
        width: 12,
        height: 12,
        resizeMode: "contain",
        marginLeft: 5
    },
    row: {
        flexDirection: "row",
        justifyContent: "space-between",
        flexWrap: "wrap",
        padding: 10,
    },
    item: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: 10,
    },
    SystemPrompt: {
        width: 122,
        height: 122,
    },
    SystemPrompt_2: {
        width: 122,
        height: 122,
        opacity: 0.3
    },
    statusBar: {
        width: width,
        height: statusBarHeight,
        backgroundColor: 'transparent',
    },
})
